<script setup lang="ts">
import { onMounted, onBeforeUnmount, watch, ref, reactive } from 'vue'
import * as echarts from 'echarts'
import { t } from '@/i18n'
import { headersStore } from '@/stores/apiHeader'
import {
  DEFAULT_ECHARTS_FONTSIZE,
  DIALOG_ECHARTS_FONTSIZE,
} from '@/Utils/setting'
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore

const fontSize = dialogInfo.visible
  ? DIALOG_ECHARTS_FONTSIZE
  : DEFAULT_ECHARTS_FONTSIZE
const dialogInfoVisible = dialogInfo.visible

const language_id = headersStore().language_id
const props = defineProps<{
  chartData: any
}>()
props.chartData.name = props.chartData.name + Math.random()

watch(
  () => props.chartData,
  () => {
    createChart()
  },
  { deep: true }
)
const data = props.chartData.data

const legendData = data.map((item) => {
  return item.name
})

const seriesData = data.map((item) => {
  return {
    name: item.name,
    value: item.value,
  }
})

// 调整px到合适的大小
const changePixelSize = (px: number) => {
  // 获取当前屏幕宽度
  const width = document.body.clientWidth
  let res = (px / 1920) * width
  // 保留整数
  return parseInt(res.toFixed(0))
}

let myChart: echarts.ECharts
const loading = ref<boolean>(true)
const createChart = () => {
  // 判断是否能获取到dom,如果不能直接结束
  const theDom = document.getElementById(props.chartData.name)
  if (!theDom) {
    return ''
  }

  // 绘制新图表
  myChart = echarts.init(document.getElementById(props.chartData.name))

  const option = {
    tooltip: {
      backgroundColor: 'rgba(0,0,0,0.7)',
      position:
        language_id == 'zh-cn'
          ? function (point, params, dom, rect, size) {
              const [pointX, pointY] = point
              const [boxWidth, boxHeight] = size.contentSize
              const x = boxWidth > pointX ? pointX + 10 : pointX - boxWidth - 10
              const y = boxHeight > pointY ? 5 : pointY - boxHeight
              return [x, y]
            }
          : function (pos, params, dom, rect, size) {
              // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
              var obj = { top: 30 }
              obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 10
              return obj
            },
      textStyle: {
        fontSize: changePixelSize(fontSize),
        color: '#fff',
      },
      axisPointer: {
        type: 'shadow',
      },
    },

    legend: {
      type: 'scroll',
      data: legendData.length > 1 ? legendData : [],
      itemWidth: changePixelSize(30),
      itemHeight: changePixelSize(10),
      icon: 'circle',
      textStyle: {
        fontSize: changePixelSize(fontSize),
        lineHeight: changePixelSize(15),
        color: '#fff',
        top: '2%',
      },
      pageIconColor: '#00f9f5',
      pageIconSize: changePixelSize(fontSize),
      pageTextStyle: {
        color: '#fff',
      },
    },

    series: [
      {
        type: 'pie',

        radius:
          props.chartData.graphMode && !dialogInfoVisible
            ? [35, 80]
            : props.chartData.graphMode && dialogInfoVisible
            ? [50, 100]
            : !dialogInfoVisible
            ? [0, 70]
            : [0, 100],
        roseType: props.chartData.graphMode ? '' : 'radius',
        itemStyle: {
          borderRadius: changePixelSize(5),
        },
        data: seriesData,

        label: {
          show: true,
          formatter: '\n{c}' + ' %',
          color: '#fff',

          fontSize: changePixelSize(fontSize),
          position: props.chartData.graphMode ? 'inner' : 'outside',
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + ' %'
          },
        },
        labelLine: {
          length: changePixelSize(6), // 控制线条长度
        },
      },
    ],
  }

  // 绘制图表
  myChart.setOption(option)
  loading.value = false
}

const destroyChart = () => {
  if (myChart) {
    myChart = null
  }
}
onBeforeUnmount(() => {
  // 销毁图表实例
  destroyChart()
})

onMounted(() => {
  setTimeout(() => {
    createChart()
  }, 500)
})
</script>

<template>
  <div
    :class="{
      'echart-box': true,
      'dialog-box': dialogInfoVisible == true,
    }"
  >
    <div class="chart" :id="chartData.name"></div>
  </div>
</template>
<style lang="scss" scoped>
.echart-box {
  width: 100%;
  height: 260px;
  .chart {
    width: 100%;
    height: 100%;
  }
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.dialog-box {
  height: calc(500px - 45px);
}
</style>
